<template>
	<ui-sys tabbar>
		<ui-navbar :back="false" opacity :placeholder="false">
			<view class="flex-bar p-3" v-if="sys_scrollTop > sys_navBar">
				<text class="text-lg cicon-goods-o text-red mx-3"></text>
				<text class="text-lg text-bold">Today</text>
			</view>
			<view class="p-3 flex-bar flex-sub" v-if="sys_scrollTop > sys_navBar">

			</view>
			<view class="flex-bar">
				<!-- #ifdef MP -->
				<view :style="{ width: `${sys_capsule.width + 10}px`, height: `${sys_capsule.height}px` }"></view>
				<!-- #endif -->
			</view>
		</ui-navbar>
		<view class="header">
			<view class="title ml-5" v-if="videoList.length>0">
				<text>{{videoList[0].nowDate}}</text>
				<text class="text-40  text-bold">Today</text>
			</view>
			<view @tap="handlePublishUser(userInfo.uid)">
				<ui-avatar v-if="isLogin" ui="round sl mr-5" :src="userInfo.avatarUrl">
				</ui-avatar>
			</view>
		</view>

		<view class="ui-container">

			<view class="ui-cards goods col-goods" v-for="(videoInfo, index) in videoList" :key="index">
				<view class="header" v-if="index!=0">
					<view class="title ml-3 ">
						<text>{{videoInfo.videoDate}}</text>
						<text class="text-40 text-bold">{{videoInfo.videoWeek}}</text>
					</view>
				</view>


				<view class="ui-item shadow-grey" v-for="(item, index) in videoInfo.videoListVOS" :key="item.vid"
					@tap="handlePublishVideoInfo(item.vid)">
					<image :src="item.coverUrl" class="image" mode="aspectFill"></image>
					<view class="content">
						<view class="text-cut text-lg text-bold">{{ item.title }}</view>
						<view class="ui-TC-3 mt-2 text-linecut-2">{{ item.des }}</view>
						<view class="flex-bar mt-2">
							<view class="flex-bar ui-TC-3">
								<view class="flex-bar ">
									<text class="cicon-favorite mx-2"></text>
									{{ item.praiseCounts }}
								</view>
								<view class="flex-bar mx-3">
									<text class="cicon-play-arrow mx-2"></text>
									{{ item.playCounts }}
								</view>
							</view>
							<view class="flex-bar mx-3">
								<text class="cicon-reply mx-2"></text>
								分享
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</ui-sys>
</template>

<script>
	import {
		getStorageUserInfo
	} from '@/utils/storageUtils.js'
	import {
		getIndexVideoListRequest
	} from '@/api/video.js'
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: null,
				videoList: [],
				nowDate: '2022-04-03',
				subDay: 0

			};
		},
		onLoad() {

			this.checkLogin()
			this.initNowDate()
			this.getIndexVideoList()
		},
		onReachBottom() {
			this.subDay++;
			this.getIndexVideoList()
		},
		methods: {

			// 检查登陆状态
			checkLogin() {
				this.userInfo = getStorageUserInfo()
				if (this.userInfo != null) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			},
			initNowDate() {
				var nowdate = new Date();
				let year = nowdate.getFullYear()
				let month = (nowdate.getMonth() + 1).toString().padStart(2, '0')
				let date = nowdate.getDate().toString().padStart(2, '0')
				this.nowDate = year + '-' + month + '-' + date

			},
			// 获取首页视频
			getIndexVideoList() {
				const params = {
					"classId": null,
					"endTime": null,
					"nowDate": this.nowDate,
					"subDay": this.subDay,
					"startTime": null,
					"title": null,
					"uid": null
				}
				getIndexVideoListRequest(params).then(res => {
					console.log(res.data.videoListVOS.length)
					if (res.data.videoListVOS.length != 0) {
						this.videoList.push(res.data)
						return
					}
					this.$Tips('休息一会吧 都被您看完了');

				})
			},
			handlePublishVideoInfo(_id) {
				uni.navigateTo({
					url: `/pages/video/info?videoID=${_id}`,
				});
			},
			// 进入个人中心
			handlePublishUser(_id) {
				uni.navigateTo({
					url: `/pages/my/info?userID=${_id}`,
				});
			},
		}
	};
</script>

<style lang="scss">
	.header {
		display: flex;
		justify-content: space-between;
		padding-top: 100rpx;
		padding-bottom: 10rpx;

		.title {
			display: flex;
			flex-direction: column;
		}

	}
</style>
